﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="a.aspx.cs" MasterPageFile="~/Admin_Master.Master" Inherits="Layout_website.Admin_panel.WebForm2" %>
<asp:Content ContentPlaceHolderID="content_admin" ID="dsa" runat="server">
        <!--/PHẦN ĐẶT NỘI DUNG TRANG WEB VÀO ĐÂY:TAB,TRANG,GRID....-->

                    <%--                    <!--c?t 1/2 :md-6-->
                    <div class="col-md-6">
                    <div class="box border">
                    <div class="box-title">
                        <h4><i class="fa fa-columns"></i> <span class="hidden-inline-mobile">Sales Tab</span></h4>
                    </div>
                    <div class="box-body">
                    <div class="tabbable header-tabs">
                    <ul class="nav nav-tabs">
                        <li class=""><a href="#sales" data-toggle="tab"><i class="fa fa-bookmark"></i> <span class="hidden-inline-mobile">New Orders</span></a></li>
                        <li class="active"><a href="#feed" data-toggle="tab"><i class="fa fa-rss"></i> <span class="hidden-inline-mobile">Recent Activities</span></a></li>
                    </ul>
                    <div class="tab-content">
                    <div class="tab-pane" id="sales">
                    <div class="panel panel-default">
                    <div class="panel-body orders no-opaque">
                        <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 450px;"><div class="scroller" data-height="450px" data-always-visible="1" data-rail-visible="1" style="overflow: hidden; width: auto; height: 450px;">
                            <ul class="list-unstyled">
                                <li class="clearfix">
                                    <div class="pull-left">
                                        <p>
                                        </p><h5><strong>#A14</strong> Rikki S. Stover</h5>
                                        <p></p>
                                        <p><i class="fa fa-clock-o"></i> <abbr class="timeago" title="Oct 9, 2013">Oct 9, 2013</abbr></p>

                                    </div>
                                    <div class="text-right pull-right">
                                        <h4 class="cost">$124.00</h4>
                                        <p>
                                            <span class="label label-success arrow-in-right"><i class="fa fa-check"></i> Complete</span>
                                        </p>
                                    </div>
                                    <div class="clearfix"></div>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;">
                                            <span class="sr-only">85% Complete</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="pull-left">
                                        <p>
                                        </p><h5><strong>#A15</strong> Scott Allen</h5>
                                        <p></p>
                                        <p><i class="fa fa-clock-o"></i> <abbr class="timeago" title="Oct 10, 2013">Oct 10, 2013</abbr></p>

                                    </div>
                                    <div class="text-right pull-right">
                                        <h4 class="cost">$235.00</h4>
                                        <p>
                                            <span class="label label-warning arrow-in-right"><i class="fa fa-cog"></i> In Progress</span>
                                        </p>
                                    </div>
                                    <div class="clearfix"></div>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
                                            <span class="sr-only">30% Complete</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="pull-left">
                                        <p>
                                        </p><h5><strong>#A16</strong> Larry Wright</h5>
                                        <p></p>
                                        <p><i class="fa fa-clock-o"></i> <abbr class="timeago" title="Oct 11, 2013">Oct 11, 2013</abbr></p>

                                    </div>
                                    <div class="text-right pull-right">
                                        <h4 class="cost">$77.00</h4>
                                        <p>
                                            <span class="label label-primary arrow-in-right"><i class="fa fa-archive"></i> Archived</span>
                                        </p>
                                    </div>
                                    <div class="clearfix"></div>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="97" aria-valuemin="0" aria-valuemax="100" style="width: 97%;">
                                            <span class="sr-only">97% Complete</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="pull-left">
                                        <p>
                                        </p><h5><strong>#A17</strong> John Dale</h5>
                                        <p></p>
                                        <p><i class="fa fa-clock-o"></i> <abbr class="timeago" title="Oct 10, 2013">Oct 10, 2013</abbr></p>

                                    </div>
                                    <div class="text-right pull-right">
                                        <h4 class="cost">$174.00</h4>
                                        <p>
                                            <span class="label label-danger arrow-in-right"><i class="fa fa-star"></i> New</span>
                                        </p>
                                    </div>
                                    <div class="clearfix"></div>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
                                            <span class="sr-only">10% Complete</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="pull-left">
                                        <p>
                                        </p><h5><strong>#A18</strong> MJ Perkins</h5>
                                        <p></p>
                                        <p><i class="fa fa-clock-o"></i> <abbr class="timeago" title="Oct 11, 2013">Oct 11, 2013</abbr></p>

                                    </div>
                                    <div class="text-right pull-right">
                                        <h4 class="cost">$68.00</h4>
                                        <p>
                                            <span class="label label-info arrow-in-right"><i class="fa fa-truck"></i> In Transit</span>
                                        </p>
                                    </div>
                                    <div class="clearfix"></div>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
                                            <span class="sr-only">50% Complete</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="pull-left">
                                        <p>
                                        </p><h5><strong>#A19</strong> Stephen Stover</h5>
                                        <p></p>
                                        <p><i class="fa fa-clock-o"></i> <abbr class="timeago" title="Oct 9, 2013">Oct 9, 2013</abbr></p>

                                    </div>
                                    <div class="text-right pull-right">
                                        <h4 class="cost">$124.00</h4>
                                        <p>
                                            <span class="label label-success arrow-in-right"><i class="fa fa-check"></i> Complete</span>
                                        </p>
                                    </div>
                                    <div class="clearfix"></div>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
                                            <span class="sr-only">80% Complete</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="pull-left">
                                        <p>
                                        </p><h5><strong>#A20</strong> Edward Lus</h5>
                                        <p></p>
                                        <p><i class="fa fa-clock-o"></i> <abbr class="timeago" title="Oct 11, 2013">Oct 11, 2013</abbr></p>

                                    </div>
                                    <div class="text-right pull-right">
                                        <h4 class="cost">$52.00</h4>
                                        <p>
                                            <span class="label label-danger arrow-in-right"><i class="fa fa-star"></i> New</span>
                                        </p>
                                    </div>
                                    <div class="clearfix"></div>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
                                            <span class="sr-only">20% Complete</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="pull-left">
                                        <p>
                                        </p><h5><strong>#A21</strong> Alice Mangrum</h5>
                                        <p></p>
                                        <p><i class="fa fa-clock-o"></i> <abbr class="timeago" title="Oct 11, 2013">Oct 11, 2013</abbr></p>

                                    </div>
                                    <div class="text-right pull-right">
                                        <h4 class="cost">$14.00</h4>
                                        <p>
                                            <span class="label label-info arrow-in-right"><i class="fa fa-truck"></i> In Transit</span>
                                        </p>
                                    </div>
                                    <div class="clearfix"></div>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;">
                                            <span class="sr-only">65% Complete</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="pull-left">
                                        <p>
                                        </p><h5><strong>#A22</strong> Tamika Owens</h5>
                                        <p></p>
                                        <p><i class="fa fa-clock-o"></i> <abbr class="timeago" title="Oct 11, 2013">Oct 11, 2013</abbr></p>

                                    </div>
                                    <div class="text-right pull-right">
                                        <h4 class="cost">$604.00</h4>
                                        <p>
                                            <span class="label label-warning arrow-in-right"><i class="fa fa-cog"></i> In Progress</span>
                                        </p>
                                    </div>
                                    <div class="clearfix"></div>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
                                            <span class="sr-only">75% Complete</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div><div class="slimScrollBar" style="background-color: rgb(161, 178, 189); width: 7px; position: absolute; top: 117px; opacity: 0.4; display: block; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; z-index: 99; right: 1px; height: 190.85768143261075px; background-position: initial initial; background-repeat: initial initial;"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: block; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; background-color: rgb(51, 51, 51); opacity: 0.1; z-index: 90; right: 1px; background-position: initial initial; background-repeat: initial initial;"></div></div>
                    </div>
                    <div class="text-center">
                        <ul class="pagination">
                            <li class="disabled">
                                <a href="#">
                                    <i class="fa fa-angle-left"></i>
                                </a>
                            </li>
                            <li class="active">
                                <a href="#">
                                    1
                                </a>
                            </li>
                            <li>
                                <a href="#">2</a>
                            </li>
                            <li>
                                <a href="#">3</a>
                            </li>
                            <li>
                                <a href="#">4</a>
                            </li>
                            <li>
                                <a href="#">5</a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                    </div>
                    </div>
                    <div class="tab-pane active" id="feed">
                        <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 450px;"><div class="scroller" data-height="450px" data-always-visible="1" data-rail-visible="1" style="overflow: hidden; width: auto; height: 450px;">
                            <div class="feed-activity clearfix">
                                <div>
                                    <i class="pull-left roundicon fa fa-check btn btn-info"></i>
                                    <a class="user" href="#"> John Doe </a>
                                    accepted your connection request.
                                    <br>
                                    <a href="#">View profile</a>

                                </div>
                                <div class="time">
                                    <i class="fa fa-clock-o"></i>
                                    5 hours ago
                                </div>
                            </div>
                            <div class="feed-activity clearfix">
                                <div>
                                    <i class="pull-left roundicon fa fa-picture-o btn btn-danger"></i>
                                    <a class="user" href="#"> Jack Doe </a>
                                    uploaded a new photo.
                                    <br>
                                    <a href="#">Take a look</a>

                                </div>
                                <div class="time">
                                    <i class="fa fa-clock-o"></i>
                                    5 hours ago
                                </div>
                            </div>
                            <div class="feed-activity clearfix">
                                <div>
                                    <i class="pull-left roundicon fa fa-edit btn btn-pink"></i>
                                    <a class="user" href="#"> Jess Doe </a>
                                    edited their skills.
                                    <br>
                                    <a href="#">Endorse them</a>

                                </div>
                                <div class="time">
                                    <i class="fa fa-clock-o"></i>
                                    5 hours ago
                                </div>
                            </div>
                            <div class="feed-activity clearfix">
                                <div>
                                    <i class="pull-left roundicon fa fa-bitcoin btn btn-yellow"></i>
                                    <a class="user" href="#"> Divine Doe </a>
                                    made a bitcoin payment.
                                    <br>
                                    <a href="#">Check your financials</a>

                                </div>
                                <div class="time">
                                    <i class="fa fa-clock-o"></i>
                                    6 hours ago
                                </div>
                            </div>
                            <div class="feed-activity clearfix">
                                <div>
                                    <i class="pull-left roundicon fa fa-dropbox btn btn-primary"></i>
                                    <a class="user" href="#"> Lisbon Doe </a>
                                    saved a new document to Dropbox.
                                    <br>
                                    <a href="#">Download</a>

                                </div>
                                <div class="time">
                                    <i class="fa fa-clock-o"></i>
                                    1 day ago
                                </div>
                            </div>
                            <div class="feed-activity clearfix">
                                <div>
                                    <i class="pull-left roundicon fa fa-pinterest btn btn-inverse"></i>
                                    <a class="user" href="#"> Bob Doe </a>
                                    pinned a new photo to Pinterest.
                                    <br>
                                    <a href="#">Take a look</a>

                                </div>
                                <div class="time">
                                    <i class="fa fa-clock-o"></i>
                                    2 days ago
                                </div>
                            </div>
                            <div class="feed-activity clearfix">
                                <div>
                                    <i class="pull-left roundicon fa fa-clock-o btn btn-success"></i>
                                    <a class="user" href="#"> John Doe </a>
                                    accepted your connection request.
                                    <br>
                                    <a href="#">View profile</a>

                                </div>
                                <div class="time">
                                    <i class="fa fa-clock-o"></i>
                                    5 hours ago
                                </div>
                            </div>
                            <div class="feed-activity clearfix">
                                <div>
                                    <i class="pull-left roundicon fa fa-heart btn btn-purple"></i>
                                    <a class="user" href="#"> Jack Doe </a>
                                    uploaded a new photo.
                                    <br>
                                    <a href="#">Take a look</a>

                                </div>
                                <div class="time">
                                    <i class="fa fa-clock-o"></i>
                                    5 hours ago
                                </div>
                            </div>
                            <div class="feed-activity clearfix">
                                <div>
                                    <i class="pull-left roundicon fa fa-gift btn btn-pink"></i>
                                    <a class="user" href="#"> Jess Doe </a>
                                    edited their skills.
                                    <br>
                                    <a href="#">Endorse them</a>

                                </div>
                                <div class="time">
                                    <i class="fa fa-clock-o"></i>
                                    5 hours ago
                                </div>
                            </div>
                            <div class="feed-activity clearfix">
                                <div>
                                    <i class="pull-left roundicon fa fa-random btn btn-yellow"></i>
                                    <a class="user" href="#"> Divine Doe </a>
                                    made a bitcoin payment.
                                    <br>
                                    <a href="#">Check your financials</a>

                                </div>
                                <div class="time">
                                    <i class="fa fa-clock-o"></i>
                                    6 hours ago
                                </div>
                            </div>
                        </div><div class="slimScrollBar" style="background-color: rgb(161, 178, 189); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: block; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; z-index: 99; right: 1px; background-position: initial initial; background-repeat: initial initial;"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: block; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; background-color: rgb(51, 51, 51); opacity: 0.1; z-index: 90; right: 1px; background-position: initial initial; background-repeat: initial initial;"></div></div>
                    </div>
                    </div>
                    </div>
                    </div>
                    </div>
                    </div>
                    <!--c?t 1/2 :md-6-->--%>

                    <!--c?t full: md-12-->
<div class="col-md-12">
    <!-- BOX -->
    <div class="box border">
        <div class="box-title">
            <h4><i class="fa fa-columns"></i><span class="hidden-inline-mobile">Tabs on Header Box</span></h4>
        </div>
        <div class="box-body">
            <div class="tabbable header-tabs">
                <ul class="nav nav-tabs">
                    <li><a href="#box_tab6" data-toggle="tab"><i class="fa fa-desktop"></i><span class="hidden-inline-mobile">Projects</span></a></li>
                    <li><a href="#box_tab5" data-toggle="tab"><i class="fa fa-flask"></i><span class="hidden-inline-mobile">Lab</span></a></li>
                    <li class="active"><a href="#box_tab4" data-toggle="tab"><i class="fa fa-home"></i><span class="hidden-inline-mobile">Home</span> <span class="badge badge-blue font-11">3</span></a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="box_tab4">
                        <p>Content #1</p>
                        <p>There were flying cantaloupes, rainbows and songs of happiness near by, I mean I was a little frightened by the flying fruit but I'll take this any day over prison inmates. </p>
                    </div>
                    <div class="tab-pane fade" id="box_tab5">
                        <p>Content #2</p>
                        <p>There were flying cantaloupes, rainbows and songs of happiness near by, I mean I was a little frightened by the flying fruit but I'll take this any day over prison inmates. I skipped closer and closer to the festivities and when I arrived I seen all my friends I had went to high school with there were holding hands and singing Kumbayah around the camp ice.. Yes It was a giant block of ice situated on three wood logs. </p>
                    </div>
                    <div class="tab-pane fade" id="box_tab6">
                        <div class="alert alert-info"><strong>Hello!</strong> I'm a cool tabbed box.</div>
                        <p>Content #3</p>
                        <p>Duis autem vel eum iriure dolor. </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /BOX -->
</div>
                    <!--c?t full: md-12-->

                    <!--Tab tr?ng full: có t?m ki?m-->
                    <div class="col-md-12">
                    <!-- BOX -->
                    <div class="box border">
                    <div class="box-title">
                        <h4><i class="fa fa-envelope"></i>Email</h4>
                        <div class="tools">
                            <a href="#box-config" data-toggle="modal" class="config">
                                <i class="fa fa-cog"></i>
                            </a>
                            <a href="javascript:;" class="reload">
                                <i class="fa fa-refresh"></i>
                            </a>
                            <a href="javascript:;" class="collapse">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a href="javascript:;" class="remove">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="box-body">
                    <!-- TOP ROW -->
                    <div class="emailHeader row">
                        <!--searchbox-->
                        <div class="emailTitle">
                            <div class="col-md-2">
                                <img class="img-responsive pull-left" alt="Cloud Admin Logo" src="img/logo/logo-alt.png">
                            </div>
                            <div class="col-md-10">
                                <form class="form-inline hidden-xs" action="index.html">
                                    <div class="input-group input-medium">
                                        <input type="text" class="form-control" placeholder="Search Inbox">
														<span class="input-group-btn">
														<button type="submit" class="btn btn-success"><i class="fa fa-search"></i></button>
														</span>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!--searchbox-->
                    </div>
                    <!-- /TOP ROW -->
                    <hr>
                    <!-- N?i dung đ?t vào đây -->
                        n?i dung ? đây
                    <!-- N?i dung đ?t vào đây -->
                    </div>
                    </div>
                    <!-- /BOX -->
                    </div>
                    <!--Tab tr?ng full-->

                    <!--Tab tr?ng full: không t?m ki?m-->
                        <div class="col-md-12">
                            <!-- BOX -->
                            <div class="box border">
                                <div class="box-title">
                                    <h4><i class="fa fa-envelope"></i>Email</h4>
                                    <div class="tools">
                                        <a href="#box-config" data-toggle="modal" class="config">
                                            <i class="fa fa-cog"></i>
                                        </a>
                                        <a href="javascript:;" class="reload">
                                            <i class="fa fa-refresh"></i>
                                        </a>
                                        <a href="javascript:;" class="collapse">
                                            <i class="fa fa-chevron-up"></i>
                                        </a>
                                        <a href="javascript:;" class="remove">
                                            <i class="fa fa-times"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="box-body">

                                    <hr>
                                    <!-- N?i dung đ?t vào đây -->
                                    n?i dung ? đây
                                    <!-- N?i dung đ?t vào đây -->
                                </div>
                            </div>
                            <!-- /BOX -->
                        </div>
                    <!--Tab tr?ng full: không t?m ki?m-->

                    <!-- B?ng đơn gi?n-->
                    <div class="col-md-12">
                        <!-- BOX -->
                        <div class="box border green">
                            <div class="box-title">
                                <h4><i class="fa fa-bar-chart-o"></i>Stats Table</h4>
                                <div class="tools">
                                    <a href="#box-config" data-toggle="modal" class="config">
                                        <i class="fa fa-cog"></i>
                                    </a>
                                    <a href="javascript:;" class="reload">
                                        <i class="fa fa-refresh"></i>
                                    </a>
                                    <a href="javascript:;" class="collapse">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a href="javascript:;" class="remove">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="box-body">
                                <table id="example-stats" class="table table-stats table-condensed table-striped table-sortable">
                                    <thead>
                                    <tr>
                                        <th colspan="6" class="{sorter: false} headerSortable">2012 MLB Player Leaders for Batting Avg</th>
                                    </tr>
                                    <tr>
                                        <th class="headerSortable">BA</th>

                                        <th class="headerSortable">Player</th>

                                        <th class="headerSortable">Team</th>

                                        <th class="headerSortable">G</th>

                                        <th class="headerSortable">H</th>

                                        <th class="headerSortable">HR</th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                    <tr class="ss_tr_odd">
                                        <td>.411</td>

                                        <td><strong>Matt Kemp</strong></td>

                                        <td>Los Angeles Dodgers</td>

                                        <td>25</td>

                                        <td>37</td>

                                        <td>12</td>
                                    </tr>

                                    <tr class="ss_tr_even">
                                        <td>.404</td>

                                        <td><strong>Derek Jeter</strong></td>

                                        <td>New York Yankees</td>

                                        <td>25</td>

                                        <td>44</td>

                                        <td>4</td>
                                    </tr>

                                    <tr class="ss_tr_odd">
                                        <td>.395</td>

                                        <td><strong>Josh Hamilton</strong></td>

                                        <td>Texas Rangers</td>

                                        <td>22</td>

                                        <td>34</td>

                                        <td>9</td>
                                    </tr>

                                    <tr class="ss_tr_even">
                                        <td>.392</td>

                                        <td><strong>David Wright</strong></td>

                                        <td>New York Mets</td>

                                        <td>22</td>

                                        <td>31</td>

                                        <td>3</td>
                                    </tr>

                                    <tr class="ss_tr_odd">
                                        <td>.391</td>

                                        <td><strong>David Ortiz</strong></td>

                                        <td>Boston Red Sox</td>

                                        <td>24</td>

                                        <td>36</td>

                                        <td>6</td>
                                    </tr>

                                    <tr class="ss_tr_even">
                                        <td>.388</td>

                                        <td><strong>Bryan LaHair</strong></td>

                                        <td>Chicago Cubs</td>

                                        <td>22</td>

                                        <td>26</td>

                                        <td>7</td>
                                    </tr>

                                    <tr class="ss_tr_odd">
                                        <td>.361</td>

                                        <td><strong>Ryan Sweeney</strong></td>

                                        <td>Boston Red Sox</td>

                                        <td>21</td>

                                        <td>26</td>

                                        <td>0</td>
                                    </tr>

                                    <tr class="ss_tr_even">
                                        <td>.358</td>

                                        <td><strong>Jose Altuve</strong></td>

                                        <td>Houston Astros</td>

                                        <td>24</td>

                                        <td>34</td>

                                        <td>1</td>
                                    </tr>

                                    <tr class="ss_tr_odd">
                                        <td>.344</td>

                                        <td><strong>Paul Konerko</strong></td>

                                        <td>Chicago White Sox</td>

                                        <td>24</td>

                                        <td>31</td>

                                        <td>5</td>
                                    </tr>

                                    <tr class="ss_tr_even">
                                        <td>.342</td>

                                        <td><strong>Robert Andino</strong></td>

                                        <td>Baltimore Orioles</td>

                                        <td>23</td>

                                        <td>27</td>

                                        <td>1</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- /BOX -->
                    </div>
                    <!-- B?ng đơn gi?n-->

                    <!--bang full serach-->
                    <div class="col-md-12">
                        <!-- BOX -->
                        <div class="box border green">
                            <div class="box-title">
                                <h4><i class="fa fa-table"></i>Dynamic Data Tables</h4>
                                <div class="tools hidden-xs">
                                    <a href="#box-config" data-toggle="modal" class="config">
                                        <i class="fa fa-cog"></i>
                                    </a>
                                    <a href="javascript:;" class="reload">
                                        <i class="fa fa-refresh"></i>
                                    </a>
                                    <a href="javascript:;" class="collapse">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a href="javascript:;" class="remove">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="box-body">
                                <div id="datatable1_wrapper" class="dataTables_wrapper form-inline" role="grid"><div class="row"><div class="col-sm-12"><div class="pull-right"><div class="dataTables_filter" id="datatable1_filter"><label><input type="text" aria-controls="datatable1" placeholder="Search" class="form-control input-sm"></label></div></div><div class="pull-left"><div id="datatable1_length" class="dataTables_length"><label>Show <select size="1" name="datatable1_length" aria-controls="datatable1" class="form-control input-sm"><option value="10" selected="selected">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select> Rows</label></div></div><div class="clearfix"></div></div></div><table id="datatable1" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover dataTable" aria-describedby="datatable1_info">
                                    <thead>
                                    <tr role="row"><th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 185px;">Rendering engine</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style="width: 240px;">Browser</th><th class="hidden-xs sorting" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" style="width: 209px;">Platform(s)</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending" style="width: 155px;">Engine version</th><th class="hidden-xs sorting" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending" style="width: 106px;">CSS grade</th></tr>
                                    </thead>

                                    <tfoot>
                                    <tr><th rowspan="1" colspan="1">Rendering engine</th><th rowspan="1" colspan="1">Browser</th><th class="hidden-xs" rowspan="1" colspan="1">Platform(s)</th><th rowspan="1" colspan="1">Engine version</th><th class="hidden-xs" rowspan="1" colspan="1">CSS grade</th></tr>
                                    </tfoot>
                                    <tbody role="alert" aria-live="polite" aria-relevant="all"><tr class="gradeA odd">
                                        <td class=" sorting_1">Gecko</td>
                                        <td class=" ">Firefox 1.0</td>
                                        <td class="hidden-xs ">Win 98+ / OSX.2+</td>
                                        <td class="center ">1.7</td>
                                        <td class="center hidden-xs ">A</td>
                                    </tr><tr class="gradeA even">
                                        <td class=" sorting_1">Gecko</td>
                                        <td class=" ">Firefox 1.5</td>
                                        <td class="hidden-xs ">Win 98+ / OSX.2+</td>
                                        <td class="center ">1.8</td>
                                        <td class="center hidden-xs ">A</td>
                                    </tr><tr class="gradeA odd">
                                        <td class=" sorting_1">Gecko</td>
                                        <td class=" ">Firefox 2.0</td>
                                        <td class="hidden-xs ">Win 98+ / OSX.2+</td>
                                        <td class="center ">1.8</td>
                                        <td class="center hidden-xs ">A</td>
                                    </tr><tr class="gradeA even">
                                        <td class=" sorting_1">Gecko</td>
                                        <td class=" ">Firefox 3.0</td>
                                        <td class="hidden-xs ">Win 2k+ / OSX.3+</td>
                                        <td class="center ">1.9</td>
                                        <td class="center hidden-xs ">A</td>
                                    </tr><tr class="gradeA odd">
                                        <td class=" sorting_1">Gecko</td>
                                        <td class=" ">Camino 1.0</td>
                                        <td class="hidden-xs ">OSX.2+</td>
                                        <td class="center ">1.8</td>
                                        <td class="center hidden-xs ">A</td>
                                    </tr><tr class="gradeA even">
                                        <td class=" sorting_1">Gecko</td>
                                        <td class=" ">Camino 1.5</td>
                                        <td class="hidden-xs ">OSX.3+</td>
                                        <td class="center ">1.8</td>
                                        <td class="center hidden-xs ">A</td>
                                    </tr><tr class="gradeA odd">
                                        <td class=" sorting_1">Gecko</td>
                                        <td class=" ">Netscape 7.2</td>
                                        <td class="hidden-xs ">Win 95+ / Mac OS 8.6-9.2</td>
                                        <td class="center ">1.7</td>
                                        <td class="center hidden-xs ">A</td>
                                    </tr><tr class="gradeA even">
                                        <td class=" sorting_1">Gecko</td>
                                        <td class=" ">Netscape Browser 8</td>
                                        <td class="hidden-xs ">Win 98SE+</td>
                                        <td class="center ">1.7</td>
                                        <td class="center hidden-xs ">A</td>
                                    </tr><tr class="gradeA odd">
                                        <td class=" sorting_1">Gecko</td>
                                        <td class=" ">Netscape Navigator 9</td>
                                        <td class="hidden-xs ">Win 98+ / OSX.2+</td>
                                        <td class="center ">1.8</td>
                                        <td class="center hidden-xs ">A</td>
                                    </tr><tr class="gradeA even">
                                        <td class=" sorting_1">Gecko</td>
                                        <td class=" ">Mozilla 1.0</td>
                                        <td class="hidden-xs ">Win 95+ / OSX.1+</td>
                                        <td class="center ">1</td>
                                        <td class="center hidden-xs ">A</td>
                                    </tr></tbody></table><div class="row"><div class="col-sm-12"><div class="pull-left"><div class="dataTables_info" id="datatable1_info">Showing 1 to 10 of 57 entries</div></div><div class="pull-right"><div class="dataTables_paginate paging_bs_full" id="datatable1_paginate"><ul class="pagination"><li class="disabled"><a tabindex="0" class="paginate_button first" id="datatable1_first">First</a></li><li class="disabled"><a tabindex="0" class="paginate_button previous" id="datatable1_previous">Previous</a></li><li class="active"><a tabindex="0">1</a></li><li><a tabindex="0">2</a></li><li><a tabindex="0">3</a></li><li><a tabindex="0">4</a></li><li><a tabindex="0">5</a></li><li><a tabindex="0" class="paginate_button next" id="datatable1_next">Next</a></li><li><a tabindex="0" class="paginate_button last" id="datatable1_last">Last</a></li></ul></div></div><div class="clearfix"></div></div></div></div>
                            </div>
                        </div>
                        <!-- /BOX -->
                    </div>

                    <!--address book : có t?m ki?m th? thêm TOPROW vào-->
                    <div class="col-md-12">
                    <!-- BOX -->
                    <div class="box border green">
                    <div class="box-title">
                        <h4><i class="fa fa-book"></i>Address Book</h4>
                        <div class="tools">
                            <a href="#box-config" data-toggle="modal" class="config">
                                <i class="fa fa-cog"></i>
                            </a>
                            <a href="javascript:;" class="reload">
                                <i class="fa fa-refresh"></i>
                            </a>
                            <a href="javascript:;" class="collapse">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a href="javascript:;" class="remove">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>

                    <!-- TOP ROW -->
                    <br/>
                    <div class="emailHeader row">
                        <!--searchbox-->
                        <div class="emailTitle">
                            <div class="col-md-2">

                            </div>
                            <div class="col-md-8">
                                <form class="form-inline hidden-xs" action="index.html">
                                    <div class="input-group input-medium">
                                        <input type="text" class="form-control" placeholder="Search Inbox">
														<span class="input-group-btn">
														<button type="submit" class="btn btn-success"><i class="fa fa-search"></i></button>
														</span>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!--searchbox-->
                    </div>
                    <br/>
                    <!-- /TOP ROW -->
                    <div class="box-body">
                    <div class="row">
                    <div class="col-md-4">
                    <div id="address-book" class="slidernav"><div class="slide-up end"><span class="arrow up"></span></div>
                    <div class="slider-content" style="height: 514px;">
                    <ul>
                    <li id="a" class=""><a name="a" class="title">A</a>
                        <ul>
                            <li><a href="/">Adam</a></li>
                            <li><a href="/">Alex</a></li>
                            <li><a href="/">Ali</a></li>
                            <li><a href="/">Apple</a></li>
                            <li><a href="/">Arthur</a></li>
                            <li><a href="/">Ashley</a></li>
                            <li><a href="/">Adam</a></li>
                            <li><a href="/">Alex</a></li>
                            <li><a href="/">Ali</a></li>
                            <li><a href="/">Apple</a></li>
                            <li><a href="/">Arthur</a></li>

                        </ul>
                    </li>
                    <li id="b" class=""><a name="b" class="title">B</a>
                        <ul>
                            <li><a href="/">Barry</a></li>
                            <li><a href="/">Becky</a></li>
                            <li><a href="/">Biff</a></li>
                            <li><a href="/">Billy</a></li>
                            <li><a href="/">Bozarking</a></li>
                            <li><a href="/">Bryan</a></li>
                        </ul>
                    </li>
                    <li id="c" class=""><a name="c" class="title">c</a>
                        <ul>
                            <li><a href="/">Calista</a></li>
                            <li><a href="/">Cathy</a></li>
                            <li><a href="/">Chris</a></li>
                            <li><a href="/">Cinderella</a></li>
                            <li><a href="/">Corky</a></li>
                            <li><a href="/">Cypher</a></li>
                        </ul>
                    </li>
                    <li id="d" class=""><a name="d" class="title">d</a>
                        <ul>
                            <li><a href="/">damien</a></li>
                            <li><a href="/">danny</a></li>
                            <li><a href="/">denver</a></li>
                            <li><a href="/">devon</a></li>
                            <li><a href="/">doug</a></li>
                            <li><a href="/">dustin</a></li>
                        </ul>
                    </li>
                    <li id="e" class=""><a name="e" class="title">E</a>
                        <ul>
                            <li><a href="/">Barry</a></li>
                            <li><a href="/">Becky</a></li>
                            <li><a href="/">Biff</a></li>
                            <li><a href="/">Billy</a></li>
                            <li><a href="/">Bozarking</a></li>
                            <li><a href="/">Bryan</a></li>
                        </ul>
                    </li>
                    <li id="f" class=""><a name="f" class="title">f</a>
                        <ul>
                            <li><a href="/">Calista</a></li>
                            <li><a href="/">Cathy</a></li>
                            <li><a href="/">Chris</a></li>
                            <li><a href="/">Cinderella</a></li>
                            <li><a href="/">Corky</a></li>
                            <li><a href="/">Cypher</a></li>
                        </ul>
                    </li>
                    <li id="g" class=""><a name="g" class="title">g</a>
                        <ul>
                            <li><a href="/">damien</a></li>
                            <li><a href="/">danny</a></li>
                            <li><a href="/">denver</a></li>
                            <li><a href="/">devon</a></li>
                            <li><a href="/">doug</a></li>
                            <li><a href="/">dustin</a></li>
                        </ul>
                    </li>
                    <li id="h" class=""><a name="h" class="title">h</a>
                        <ul>
                            <li><a href="/">Barry</a></li>
                            <li><a href="/">Becky</a></li>
                            <li><a href="/">Biff</a></li>
                            <li><a href="/">Billy</a></li>
                            <li><a href="/">Bozarking</a></li>
                            <li><a href="/">Bryan</a></li>
                        </ul>
                    </li>
                    <li id="i" class=""><a name="i" class="title">i</a>
                        <ul>
                            <li><a href="/">Calista</a></li>
                            <li><a href="/">Cathy</a></li>
                            <li><a href="/">Chris</a></li>
                            <li><a href="/">Cinderella</a></li>
                            <li><a href="/">Corky</a></li>
                            <li><a href="/">Cypher</a></li>
                        </ul>
                    </li>
                    <li id="j" class=""><a name="j" class="title">j</a>
                        <ul>
                            <li><a href="/">damien</a></li>
                            <li><a href="/">danny</a></li>
                            <li><a href="/">denver</a></li>
                            <li><a href="/">devon</a></li>
                            <li><a href="/">doug</a></li>
                            <li><a href="/">dustin</a></li>
                        </ul>
                    </li>
                    <li id="k" class=""><a name="k" class="title">k</a>
                        <ul>
                            <li><a href="/">Barry</a></li>
                            <li><a href="/">Becky</a></li>
                            <li><a href="/">Biff</a></li>
                            <li><a href="/">Billy</a></li>
                            <li><a href="/">Bozarking</a></li>
                            <li><a href="/">Bryan</a></li>
                        </ul>
                    </li>
                    <li id="l" class=""><a name="l" class="title">l</a>
                        <ul>
                            <li><a href="/">Calista</a></li>
                            <li><a href="/">Cathy</a></li>
                            <li><a href="/">Chris</a></li>
                            <li><a href="/">Cinderella</a></li>
                            <li><a href="/">Corky</a></li>
                            <li><a href="/">Cypher</a></li>
                        </ul>
                    </li>
                    <li id="m" class=""><a name="m" class="title">m</a>
                        <ul>
                            <li><a href="/">damien</a></li>
                            <li><a href="/">danny</a></li>
                            <li><a href="/">denver</a></li>
                            <li><a href="/">devon</a></li>
                            <li><a href="/">doug</a></li>
                            <li><a href="/">dustin</a></li>
                        </ul>
                    </li>
                    <li id="n" class="selected"><a name="n" class="title">n</a>
                        <ul>
                            <li><a href="/">damien</a></li>
                            <li><a href="/">danny</a></li>
                            <li><a href="/">denver</a></li>
                            <li><a href="/">devon</a></li>
                            <li><a href="/">doug</a></li>
                            <li><a href="/">dustin</a></li>
                        </ul>
                    </li>
                    <li id="o" class=""><a name="o" class="title">o</a>
                        <ul>
                            <li><a href="/">damien</a></li>
                            <li><a href="/">danny</a></li>
                            <li><a href="/">denver</a></li>
                            <li><a href="/">devon</a></li>
                            <li><a href="/">doug</a></li>
                            <li><a href="/">dustin</a></li>
                        </ul>
                    </li>
                    <li id="p" class=""><a name="p" class="title">p</a>
                        <ul>
                            <li><a href="/">Barry</a></li>
                            <li><a href="/">Becky</a></li>
                            <li><a href="/">Biff</a></li>
                            <li><a href="/">Billy</a></li>
                            <li><a href="/">Bozarking</a></li>
                            <li><a href="/">Bryan</a></li>
                        </ul>
                    </li>
                    <li id="q"><a name="q" class="title">q</a>
                        <ul>
                            <li><a href="/">Calista</a></li>
                            <li><a href="/">Cathy</a></li>
                            <li><a href="/">Chris</a></li>
                            <li><a href="/">Cinderella</a></li>
                            <li><a href="/">Corky</a></li>
                            <li><a href="/">Cypher</a></li>
                        </ul>
                    </li>
                    <li id="r"><a name="r" class="title">r</a>
                        <ul>
                            <li><a href="/">damien</a></li>
                            <li><a href="/">danny</a></li>
                            <li><a href="/">denver</a></li>
                            <li><a href="/">devon</a></li>
                            <li><a href="/">doug</a></li>
                            <li><a href="/">dustin</a></li>
                        </ul>
                    </li>
                    <li id="s"><a name="s" class="title">s</a>
                        <ul>
                            <li><a href="/">Barry</a></li>
                            <li><a href="/">Becky</a></li>
                            <li><a href="/">Biff</a></li>
                            <li><a href="/">Billy</a></li>
                            <li><a href="/">Bozarking</a></li>
                            <li><a href="/">Bryan</a></li>
                        </ul>
                    </li>
                    <li id="t"><a name="t" class="title">t</a>
                        <ul>
                            <li><a href="/">Calista</a></li>
                            <li><a href="/">Cathy</a></li>
                            <li><a href="/">Chris</a></li>
                            <li><a href="/">Cinderella</a></li>
                            <li><a href="/">Corky</a></li>
                            <li><a href="/">Cypher</a></li>
                        </ul>
                    </li>
                    <li id="u"><a name="u" class="title">u</a>
                        <ul>
                            <li><a href="/">damien</a></li>
                            <li><a href="/">danny</a></li>
                            <li><a href="/">denver</a></li>
                            <li><a href="/">devon</a></li>
                            <li><a href="/">doug</a></li>
                            <li><a href="/">dustin</a></li>
                        </ul>
                    </li>
                    <li id="v"><a name="v" class="title">v</a>
                        <ul>
                            <li><a href="/">Barry</a></li>
                            <li><a href="/">Becky</a></li>
                            <li><a href="/">Biff</a></li>
                            <li><a href="/">Billy</a></li>
                            <li><a href="/">Bozarking</a></li>
                            <li><a href="/">Bryan</a></li>
                        </ul>
                    </li>
                    <li id="w" class=""><a name="w" class="title">w</a>
                        <ul>
                            <li><a href="/">Calista</a></li>
                            <li><a href="/">Cathy</a></li>
                            <li><a href="/">Chris</a></li>
                            <li><a href="/">Cinderella</a></li>
                            <li><a href="/">Corky</a></li>
                            <li><a href="/">Cypher</a></li>
                        </ul>
                    </li>
                    <li id="x" class=""><a name="x" class="title">x</a>
                        <ul>
                            <li><a href="/">damien</a></li>
                            <li><a href="/">danny</a></li>
                            <li><a href="/">denver</a></li>
                            <li><a href="/">devon</a></li>
                            <li><a href="/">doug</a></li>
                            <li><a href="/">dustin</a></li>
                        </ul>
                    </li>
                    <li id="y" class=""><a name="y" class="title">y</a>
                        <ul>
                            <li><a href="/">damien</a></li>
                            <li><a href="/">danny</a></li>
                            <li><a href="/">denver</a></li>
                            <li><a href="/">devon</a></li>
                            <li><a href="/">doug</a></li>
                            <li><a href="/">dustin</a></li>
                        </ul>
                    </li>
                    <li id="z" class=""><a name="z" class="title">z</a>
                        <ul>
                            <li><a href="/">damien</a></li>
                            <li><a href="/">danny</a></li>
                            <li><a href="/">denver</a></li>
                            <li><a href="/">devon</a></li>
                            <li><a href="/">doug</a></li>
                            <li><a href="/">dustin</a></li>
                        </ul>
                    </li>
                    </ul>
                    </div>
                    <div class="slider-nav" style="height: 514px; top: 20px;"><ul><li><a alt="#a">a</a></li><li><a alt="#b">b</a></li><li><a alt="#c">c</a></li><li><a alt="#d">d</a></li><li><a alt="#e">e</a></li><li><a alt="#f">f</a></li><li><a alt="#g">g</a></li><li><a alt="#h">h</a></li><li><a alt="#i">i</a></li><li><a alt="#j">j</a></li><li><a alt="#k">k</a></li><li><a alt="#l">l</a></li><li><a alt="#m">m</a></li><li><a alt="#n">n</a></li><li><a alt="#o">o</a></li><li><a alt="#p">p</a></li><li><a alt="#q">q</a></li><li><a alt="#r">r</a></li><li><a alt="#s">s</a></li><li><a alt="#t">t</a></li><li><a alt="#u">u</a></li><li><a alt="#v">v</a></li><li><a alt="#w">w</a></li><li><a alt="#x">x</a></li><li><a alt="#y">y</a></li><li><a alt="#z">z</a></li></ul></div><div class="slide-down"><span class="arrow down"></span></div></div>
                    </div>
                    <div class="col-md-8">
                        <div id="contact-card" class="panel panel-default">
                            <div class="panel-heading">
                                <h2 class="panel-title">Cathy</h2>
                            </div>
                            <div class="panel-body">
                                <div id="card" class="row">
                                    <div class="col-md-6 headshot">
                                        <img src="img/addressbook/4.jpg" alt="" height="200" width="200">
                                    </div>
                                    <div class="col-md-6">
                                        <table class="table table-hover">
                                            <tbody>
                                            <tr>
                                                <td><i class="fa fa-font"></i> Name</td>
                                                <td id="card-name">Cathy</td>
                                            </tr>
                                            <tr>
                                                <td><i class="fa fa-home"></i> Address</td>
                                                <td>795 Folsom Ave, Suite 600
                                                    San Francisco, CA 94107
                                                    P: (123) 456-7890 </td>
                                            </tr>
                                            <tr>
                                                <td><i class="fa fa-phone"></i> Phone</td>
                                                <td>+001 8753-3648-002</td>
                                            </tr>
                                            <tr>
                                                <td><i class="fa fa-envelope"></i> Email</td>
                                                <td>sampleemail@gmail.com</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                    </div>
                    </div>
                    <!-- /BOX -->
                    </div>
                    <!--address book-->
                    <!--form-->

                    <%-- Line phân chia giữa các tab --%>
                        <div class="separator"></div>

                    <!--FULL FORM-->
                    <div class="col-md-12">
                    <div class="row">
                    <div class="col-md-6">
                        <!-- BASIC -->
                        <div class="box border orange">
                            <div class="box-title">
                                <h4><i class="fa fa-bars"></i>Basic form elements</h4>
                                <div class="tools hidden-xs">
                                    <a href="#box-config" data-toggle="modal" class="config">
                                        <i class="fa fa-cog"></i>
                                    </a>
                                    <a href="javascript:;" class="reload">
                                        <i class="fa fa-refresh"></i>
                                    </a>
                                    <a href="javascript:;" class="collapse">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a href="javascript:;" class="remove">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="box-body big">
                                <h3 class="form-title">Basic Example</h3>
                                <form role="form">
                                    <div class="form-group">
                                        <label for="exampleInputEmail1">Email address</label>
                                        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">Password</label>
                                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                                    </div>
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox"> Check me out
                                        </label>
                                    </div>
                                    <button type="submit" class="btn btn-success">Submit</button>
                                </form>
                                <div class="separator"></div>
                                <h3 class="form-title">Inline form</h3>
                                <form class="form-inline" role="form">
                                    <div class="form-group">
                                        <label class="sr-only" for="exampleInputEmail2">Email address</label>
                                        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
                                    </div>
                                    <div class="form-group">
                                        <label class="sr-only" for="exampleInputPassword2">Password</label>
                                        <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
                                    </div>
                                    <button type="submit" class="btn btn-inverse">Sign in</button>
                                </form>
                                <div class="separator"></div>
                                <h3 class="form-title">Horizontal form</h3>
                                <form class="form-horizontal" role="form">
                                    <div class="form-group">
                                        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                                        <div class="col-sm-10">
                                            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                                        <div class="col-sm-10">
                                            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox"> Remember me
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="submit" class="btn btn-pink">Sign in</button>
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>
                        <!-- /BASIC -->
                        <!-- BASIC -->
                        <div class="box border purple">
                            <div class="box-title">
                                <h4><i class="fa fa-bars"></i>Column sizing</h4>
                                <div class="tools hidden-xs">
                                    <a href="#box-config" data-toggle="modal" class="config">
                                        <i class="fa fa-cog"></i>
                                    </a>
                                    <a href="javascript:;" class="reload">
                                        <i class="fa fa-refresh"></i>
                                    </a>
                                    <a href="javascript:;" class="collapse">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a href="javascript:;" class="remove">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="box-body big">
                                <div class="row">
                                    <div class="col-xs-2">
                                        <input type="text" class="form-control" placeholder=".col-xs-2">
                                    </div>
                                    <div class="col-xs-3">
                                        <input type="text" class="form-control" placeholder=".col-xs-3">
                                    </div>
                                    <div class="col-xs-4">
                                        <input type="text" class="form-control" placeholder=".col-xs-4">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /BASIC -->
                    </div>
                    <div class="col-md-6">
                        <div class="box border primary">
                            <div class="box-title">
                                <h4><i class="fa fa-bars"></i>Form controls</h4>
                                <div class="tools hidden-xs">
                                    <a href="#box-config" data-toggle="modal" class="config">
                                        <i class="fa fa-cog"></i>
                                    </a>
                                    <a href="javascript:;" class="reload">
                                        <i class="fa fa-refresh"></i>
                                    </a>
                                    <a href="javascript:;" class="collapse">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a href="javascript:;" class="remove">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="box-body big">
                                <h3 class="form-title">Supported controls</h3>
                                <form class="form-horizontal" role="form">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Inputs</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" placeholder="Text input">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Textarea</label>
                                        <div class="col-sm-9">
                                            <textarea class="form-control" rows="3"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Inline checkboxes</label>
                                        <div class="col-sm-9">
                                            <label class="checkbox-inline">
                                                <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
                                            </label>
                                            <label class="checkbox-inline">
                                                <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
                                            </label>
                                            <label class="checkbox-inline">
                                                <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Selects</label>
                                        <div class="col-sm-9">
                                            <select class="form-control">
                                                <option>1</option>
                                                <option>2</option>
                                                <option>3</option>
                                                <option>4</option>
                                                <option>5</option>
                                            </select>
                                            <div class="divide-20"></div>
                                            <select multiple="" class="form-control">
                                                <option>1</option>
                                                <option>2</option>
                                                <option>3</option>
                                                <option>4</option>
                                                <option>5</option>
                                            </select>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="box border green">
                            <div class="box-title">
                                <h4><i class="fa fa-bars"></i>Form states</h4>
                                <div class="tools hidden-xs">
                                    <a href="#box-config" data-toggle="modal" class="config">
                                        <i class="fa fa-cog"></i>
                                    </a>
                                    <a href="javascript:;" class="reload">
                                        <i class="fa fa-refresh"></i>
                                    </a>
                                    <a href="javascript:;" class="collapse">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a href="javascript:;" class="remove">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="box-body big">
                                <form class="form-horizontal" role="form">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Input focus</label>
                                        <div class="col-sm-9">
                                            <input class="form-control" id="focusedInput" type="text" value="This is focused...">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Disabled inputs</label>
                                        <div class="col-sm-9">
                                            <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Field with tooltip on focus</label>
                                        <div class="col-sm-9">
                                            <input type="text" name="regular" title="" class="form-control tip-focus" data-original-title="Tooltip on focus">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Field with tooltip on hover</label>
                                        <div class="col-sm-9">
                                            <input type="text" name="regular" title="" class="form-control tip" data-original-title="Tooltip on hover">
                                        </div>
                                    </div>
                                    <div class="form-group has-success">
                                        <label class="col-sm-3 control-label">Input with success</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" id="inputSuccess">
                                        </div>
                                    </div>
                                    <div class="form-group has-warning">
                                        <label class="col-sm-3 control-label">Input with warning</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" id="inputWarning">
                                        </div>
                                    </div>
                                    <div class="form-group has-error">
                                        <label class="col-sm-3 control-label">Input with error</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" id="inputError">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    </div>
                    <div class="separator"></div>
                    <div class="row">
                    <div class="col-md-12">
                        <div class="box border inverse">
                            <div class="box-title">
                                <h4><i class="fa fa-bars"></i>Input groups</h4>
                                <div class="tools">
                                    <a href="#box-config" data-toggle="modal" class="config">
                                        <i class="fa fa-cog"></i>
                                    </a>
                                    <a href="javascript:;" class="reload">
                                        <i class="fa fa-refresh"></i>
                                    </a>
                                    <a href="javascript:;" class="collapse">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a href="javascript:;" class="remove">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="box-body">
                                <form class="form-horizontal" role="form">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Input Prepend Addon</label>
                                        <div class="col-sm-9">
                                            <div class="input-group">
                                                <span class="input-group-addon">@</span>
                                                <input type="text" class="form-control" placeholder="Username">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Input Append Addon</label>
                                        <div class="col-sm-9">
                                            <div class="input-group">
                                                <input type="text" class="form-control">
                                                <span class="input-group-addon">.00</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Both sides</label>
                                        <div class="col-sm-9">
                                            <div class="input-group">
                                                <span class="input-group-addon">$</span>
                                                <input type="text" class="form-control">
                                                <span class="input-group-addon">.00</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Checkboxes Addon</label>
                                        <div class="col-sm-9">
                                            <div class="input-group">
													  <span class="input-group-addon">
														<input type="checkbox">
													  </span>
                                                <input type="text" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Radio button Addon</label>
                                        <div class="col-sm-9">
                                            <div class="input-group">
													  <span class="input-group-addon">
														<input type="radio">
													  </span>
                                                <input type="text" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Button Addon</label>
                                        <div class="col-sm-9">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="input-group">
														  <span class="input-group-btn">
															<button class="btn btn-default" type="button">Go!</button>
														  </span>
                                                        <input type="text" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="input-group">
                                                        <input type="text" class="form-control">
														  <span class="input-group-btn">
															<button class="btn btn-default" type="button">Go!</button>
														  </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Buttons with dropdowns</label>
                                        <div class="col-sm-9">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="input-group">
                                                        <div class="input-group-btn">
                                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                                                            <ul class="dropdown-menu context">
                                                                <li><a href="#">Action</a></li>
                                                                <li><a href="#">Another action</a></li>
                                                                <li><a href="#">Something else here</a></li>
                                                                <li><a href="#">Separated link</a></li>
                                                            </ul>
                                                        </div>
                                                        <input type="text" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="input-group">
                                                        <input type="text" class="form-control">
                                                        <div class="input-group-btn">
                                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                                                            <ul class="dropdown-menu pull-right context">
                                                                <li><a href="#">Action</a></li>
                                                                <li><a href="#">Another action</a></li>
                                                                <li><a href="#">Something else here</a></li>
                                                                <li><a href="#">Separated link</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Typeahead Autocomplete</label>
                                        <div class="col-sm-9">
                                            <span class="twitter-typeahead" style="position: relative; display: inline-block;"><input class="tt-hint" type="text" autocomplete="off" spellcheck="off" disabled="" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 255, 255); background-image: none; background-origin: padding-box; background-size: auto; background-position: 0% 0%; background-repeat: repeat repeat;"><input type="text" name="autocomplete" class="form-control tt-query" id="autocomplete-example" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;"><span style="position: absolute; left: -9999px; visibility: hidden; white-space: nowrap; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></span><span class="tt-dropdown-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;"></span></span> <span class="help-block">Start typing e.g. Yellow, Red</span>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box border red">
                            <div class="box-title">
                                <h4><i class="fa fa-bars"></i>Control sizing</h4>
                                <div class="tools">
                                    <a href="#box-config" data-toggle="modal" class="config">
                                        <i class="fa fa-cog"></i>
                                    </a>
                                    <a href="javascript:;" class="reload">
                                        <i class="fa fa-refresh"></i>
                                    </a>
                                    <a href="javascript:;" class="collapse">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a href="javascript:;" class="remove">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="box-body">
                                <form class="form-horizontal" role="form">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Large Input</label>
                                        <div class="col-sm-9">
                                            <input class="form-control input-lg" type="text" placeholder=".input-lg">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Default Input</label>
                                        <div class="col-sm-9">
                                            <input class="form-control" type="text" placeholder="Default input">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Small Input</label>
                                        <div class="col-sm-9">
                                            <input class="form-control input-sm" type="text" placeholder=".input-sm">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Large Select</label>
                                        <div class="col-sm-9">
                                            <select class="form-control input-lg">...</select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Default Select</label>
                                        <div class="col-sm-9">
                                            <select class="form-control">...</select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Small Select</label>
                                        <div class="col-sm-9">
                                            <select class="form-control input-sm">...</select>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    </div>
                    <div class="separator"></div>
                    <!-- SAMPLE -->
                    <div class="row">
                        <div class="col-md-6">
                            <!-- BOX -->
                            <div class="box border red">
                                <div class="box-title">
                                    <h4><i class="fa fa-bars"></i>Textarea</h4>
                                    <div class="tools">
                                        <a href="#box-config" data-toggle="modal" class="config">
                                            <i class="fa fa-cog"></i>
                                        </a>
                                        <a href="javascript:;" class="reload">
                                            <i class="fa fa-refresh"></i>
                                        </a>
                                        <a href="javascript:;" class="collapse">
                                            <i class="fa fa-chevron-up"></i>
                                        </a>
                                        <a href="javascript:;" class="remove">
                                            <i class="fa fa-times"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="box-body">
                                    <form class="form-horizontal " action="#">
                                        <div class="form-group">
                                            <label class="col-md-2 control-label">Textarea:</label>
                                            <div class="col-md-10"><textarea rows="3" cols="5" name="textarea" class="form-control"></textarea></div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-2 control-label">Autosize textarea:</label>
                                            <div class="col-md-10"><textarea rows="3" cols="5" name="textarea" class="autosize form-control textarea-transition" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 74px;"></textarea><span class="help-block">Keep pressing Enter button to expand the textarea</span></div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-2 control-label">With character counter:</label>
                                            <div class="col-md-10"> <textarea rows="3" cols="5" name="textarea" class="countable form-control" data-limit="100"></textarea> <p class="help-block">You have <span id="counter" class="safe">140</span> characters left.</p> </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <!-- /BOX -->
                        </div>

                     >


                        <div class="col-md-6">
                            <!-- BOX -->
                            <div class="box border blue">
                                <div class="box-title">
                                    <h4><i class="fa fa-bars"></i>Input Masks</h4>
                                    <div class="tools">
                                        <a href="#box-config" data-toggle="modal" class="config">
                                            <i class="fa fa-cog"></i>
                                        </a>
                                        <a href="javascript:;" class="reload">
                                            <i class="fa fa-refresh"></i>
                                        </a>
                                        <a href="javascript:;" class="collapse">
                                            <i class="fa fa-chevron-up"></i>
                                        </a>
                                        <a href="javascript:;" class="remove">
                                            <i class="fa fa-times"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="box-body big">
                                    <form class="form-horizontal " action="#">
                                        <div class="form-group">
                                            <label class="col-md-2 control-label">Date:</label>
                                            <div class="col-md-10">
                                                <div class="input-group">
                                                    <input type="text" class="form-control" data-mask="99/99/9999"><span class="input-group-btn"> <button class="btn btn-primary" type="button"><i class="fa fa-calendar"></i> Go!</button> </span></div>
                                                <span class="help-block">99/99/9999</span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-2 control-label">Phone:</label>
                                            <div class="col-md-10">
                                                <div class="input-group"> <span class="input-group-addon"><i class="fa fa-phone"></i></span> <input type="text" class="form-control" data-mask="(999) 999-9999"></div>
                                                <span class="help-block">(999) 999-9999</span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-2 control-label">Phone + Ext:</label>
                                            <div class="col-md-10"><input type="text" class="form-control" data-mask="(999) 999-9999 x99999"><span class="help-block">(999) 999-9999 x99999</span></div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-2 control-label">Percent:</label>
                                            <div class="col-md-10"><input type="text" class="form-control" data-mask="99%"><span class="help-block">99%</span></div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <!-- /BOX -->
                        </div>
                    </div>
                    <!-- /SAMPLE -->
                    </div> 
                    <!--FULL FORM-->

                    <div class="separator"></div>
                      <!-- SAMPLE -->
                    <div class="row">
                        <div class="col-md-12">
                            <!-- BOX -->
                            <div class="box border green">
                                <div class="box-title">
                                    <h4><i class="fa fa-columns"></i><span class="hidden-inline-mobile">Tabs on Color Header</span></h4>
                                </div>
                                <div class="box-body">
                                    <div class="tabbable header-tabs">
                                        <ul class="nav nav-tabs">
                                            <li><a href="#box_tab3" data-toggle="tab"><i class="fa fa-circle-o"></i> <span class="hidden-inline-mobile">More</span></a></li>
                                            <li><a href="#box_tab2" data-toggle="tab"><i class="fa fa-laptop"></i> <span class="hidden-inline-mobile">Profile</span></a></li>
                                            <li class="active"><a href="#box_tab1" data-toggle="tab"><i class="fa fa-calendar-o"></i> <span class="hidden-inline-mobile">Home</span></a></li>
                                        </ul>
                                        <div class="tab-content">
                                            <div class="tab-pane fade in active" id="box_tab1">
                                                <p>Content #1</p>
                                                <p> There were flying cantaloupes, rainbows and songs of happiness near by, I mean I was a little frightened by the flying fruit but I'll take this any day over prison inmates. </p>
                                            </div>
                                            <div class="tab-pane fade" id="box_tab2">
                                                <p>Content #2</p>
                                                <p> There were flying cantaloupes, rainbows and songs of happiness near by, I mean I was a little frightened by the flying fruit but I'll take this any day over prison inmates. I skipped closer and closer to the festivities and when I arrived I seen all my friends I had went to high school with there were holding hands and singing Kumbayah around the camp ice.. Yes It was a giant block of ice situated on three wood logs. </p>
                                            </div>
                                            <div class="tab-pane fade" id="box_tab3">
                                                <div class="alert alert-info"><strong>Hello!</strong> I'm a cool tabbed box.</div>
                                                <p>Content #3</p>
                                                <p> The onion ring senses that the caper of your caper is swiped the fox.  </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /BOX -->
                        </div>

                    </div>
                    <!-- SAMPLE -->

                    <!--FROM 8-4-->
                    <div class="row">
                    <div class="col-md-8">
                        <div class="box border inverse">
                            <div class="box-title">
                                <h4><i class="fa fa-bars"></i>Input groups</h4>
                                <div class="tools">
                                    <a href="#box-config" data-toggle="modal" class="config">
                                        <i class="fa fa-cog"></i>
                                    </a>
                                    <a href="javascript:;" class="reload">
                                        <i class="fa fa-refresh"></i>
                                    </a>
                                    <a href="javascript:;" class="collapse">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a href="javascript:;" class="remove">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="box-body">
                                <form class="form-horizontal" role="form">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Input Prepend Addon</label>
                                        <div class="col-sm-9">
                                            <div class="input-group">
                                                <span class="input-group-addon">@</span>
                                                <input type="text" class="form-control" placeholder="Username">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Input Append Addon</label>
                                        <div class="col-sm-9">
                                            <div class="input-group">
                                                <input type="text" class="form-control">
                                                <span class="input-group-addon">.00</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Both sides</label>
                                        <div class="col-sm-9">
                                            <div class="input-group">
                                                <span class="input-group-addon">$</span>
                                                <input type="text" class="form-control">
                                                <span class="input-group-addon">.00</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Checkboxes Addon</label>
                                        <div class="col-sm-9">
                                            <div class="input-group">
													  <span class="input-group-addon">
														<input type="checkbox">
													  </span>
                                                <input type="text" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Radio button Addon</label>
                                        <div class="col-sm-9">
                                            <div class="input-group">
													  <span class="input-group-addon">
														<input type="radio">
													  </span>
                                                <input type="text" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Button Addon</label>
                                        <div class="col-sm-9">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="input-group">
														  <span class="input-group-btn">
															<button class="btn btn-default" type="button">Go!</button>
														  </span>
                                                        <input type="text" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="input-group">
                                                        <input type="text" class="form-control">
														  <span class="input-group-btn">
															<button class="btn btn-default" type="button">Go!</button>
														  </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Buttons with dropdowns</label>
                                        <div class="col-sm-9">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="input-group">
                                                        <div class="input-group-btn">
                                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                                                            <ul class="dropdown-menu context">
                                                                <li><a href="#">Action</a></li>
                                                                <li><a href="#">Another action</a></li>
                                                                <li><a href="#">Something else here</a></li>
                                                                <li><a href="#">Separated link</a></li>
                                                            </ul>
                                                        </div>
                                                        <input type="text" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="input-group">
                                                        <input type="text" class="form-control">
                                                        <div class="input-group-btn">
                                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                                                            <ul class="dropdown-menu pull-right context">
                                                                <li><a href="#">Action</a></li>
                                                                <li><a href="#">Another action</a></li>
                                                                <li><a href="#">Something else here</a></li>
                                                                <li><a href="#">Separated link</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Typeahead Autocomplete</label>
                                        <div class="col-sm-9">
                                            <span class="twitter-typeahead" style="position: relative; display: inline-block;"><input class="tt-hint" type="text" autocomplete="off" spellcheck="off" disabled="" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 255, 255); background-image: none; background-origin: padding-box; background-size: auto; background-position: 0% 0%; background-repeat: repeat repeat;"><input type="text" name="autocomplete" class="form-control tt-query" id="Text1" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;"><span style="position: absolute; left: -9999px; visibility: hidden; white-space: nowrap; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></span><span class="tt-dropdown-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;"></span></span> <span class="help-block">Start typing e.g. Yellow, Red</span>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box border red">
                            <div class="box-title">
                                <h4><i class="fa fa-bars"></i>Control sizing</h4>
                                <div class="tools">
                                    <a href="#box-config" data-toggle="modal" class="config">
                                        <i class="fa fa-cog"></i>
                                    </a>
                                    <a href="javascript:;" class="reload">
                                        <i class="fa fa-refresh"></i>
                                    </a>
                                    <a href="javascript:;" class="collapse">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a href="javascript:;" class="remove">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="box-body">
                                <form class="form-horizontal" role="form">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Large Input</label>
                                        <div class="col-sm-9">
                                            <input class="form-control input-lg" type="text" placeholder=".input-lg">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Default Input</label>
                                        <div class="col-sm-9">
                                            <input class="form-control" type="text" placeholder="Default input">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Small Input</label>
                                        <div class="col-sm-9">
                                            <input class="form-control input-sm" type="text" placeholder=".input-sm">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Large Select</label>
                                        <div class="col-sm-9">
                                            <select class="form-control input-lg">...</select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Default Select</label>
                                        <div class="col-sm-9">
                                            <select class="form-control">...</select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Small Select</label>
                                        <div class="col-sm-9">
                                            <select class="form-control input-sm">...</select>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    </div>
                    <!--FORM 8-4-->
                    <!--form-->

                    <!--/PH?N Đ?T CÁC N?I DUNG TRANG WEB VÀO ĐÂY:TAB,TRANG,GRID....-->s
</asp:Content>